<template>
  <view class="bg-c1" style="height:100vh">
    <view class="user-msg">
      <view class="photo">
        <image src="../../../static/images/home/self.png" alt=""></image>
      </view>
      <text class="name">张三</text>
    </view>

    <view class="zzje">转账金额</view>
    <view class="money-wrap">
      <view class="money-input">
        <text>￥</text>
        <input type="text">
      </view>
      <view class="remarks">
        <input type="text" placeholder="添加备注 (50字以内)">
      </view>
    </view>
    <view class="btn-wrap">
      <button id="confirm-btn" class="bg-c3">确认转账</button>
    </view>
  </view>
</template>


<script>
export default {};
</script>

<style lang="scss" scoped>
@import "../../../styles/global/index";

.user-msg {
  height: 350upx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .photo {
    width: 150upx;
    height: 150upx;
    image {
      @include size(100%, 100%);
    }
  }
  .name {
    color: #000;
    padding-top: 0.333rem;
  }
}
.zzje {
  padding: 0 60upx;
}
.money-wrap {
  margin-top: 1.333333rem;
  padding: 0 60upx;
  .money-input {
    height: 0.8rem;
    display: flex;
    align-items: center;
    padding-bottom: 0.13333rem;
    border-bottom: 1px solid #eee;
    span {
    }
    input {
      height: 0.8rem;
      padding-left: 0.266666rem;
    }
  }
  .remarks {
    margin-top: 0.3333rem;
    height: 0.666rem;
    input {
      height: 100%;
    }
  }
  input {
    margin: 0;
    padding: 0;
    border: 0;
  }
  input::-webkit-input-placeholder {
    color: #ccc;
  }
}
.btn-wrap {
  width: 80%;
  height: 68upx;
  margin: 110upx auto;
  button {
    @include size(100%, 100%);
    line-height: 68upx;
    border: none;
    font-size: 32upx;
    color: #fff;
    border-radius: 4upx;
  }
}
</style>